<template>
  <el-cascader clearable v-model="selections" :options="areas" v-if="level >= 2"></el-cascader>
  <el-select clearable v-model="selections" v-else>
    <el-option v-for="item in areas" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script lang="ts">
export default { name: 'AutumnArea' }
</script>

<script setup lang="ts">
import { computed } from 'vue'
import { type Area } from './type'

const props = defineProps({
  value: {
    type: String,
    default: () => ''
  },
  level: {
    type: Number,
    default: () => 3
  }
})

// 获取地区数据
const tempAreas = JSON.parse(localStorage.getItem('regionData') || '[]')
let areas: Array<Area> = []
if (props.level >= 3) {
  areas = tempAreas
} else if (props.level >= 2) {
  areas = JSON.parse(localStorage.getItem('provinceAndCityData') || '[]')
} else {
  tempAreas.forEach((element: Area) => {
    areas.push({
      label: element.label,
      value: element.value
    })
  })
}

const emits = defineEmits(['update:modelValue'])
const selections = computed({
  get() {
    return props.value
  },
  set(newVal: string) {
    emits('update:modelValue', newVal)
  }
})

</script>

<style lang="scss">
.el-cascader-menu {
  height: 300px;

  .el-cascader-menu__wrap {
    height: inherit !important;
  }

  .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
}
</style>
